<template>
  <view class="health-management-page">
    <!-- 页面标题 -->
    
    <!-- 长者滚动Tab -->
    <view class="elderly-tabs">
      <scroll-view 
        class="tabs-scroll" 
        scroll-x 
        enable-flex
        show-scrollbar="false"
      >
        <view class="tabs-container">
          <view 
            class="tab-item" 
            v-for="(elderly, index) in elderlyList" 
            :key="elderly.id"
            @click="switchElderly(index)"
            :class="{ active: currentElderlyIndex === index }"
          >
            <image 
              class="tab-avatar" 
              :src="elderly.avatar" 
              mode="aspectFill"
              :alt="elderly.name"
            ></image>
            <view class="tab-name">{{ elderly.name }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 当前长者信息卡片 -->
    <view class="elderly-card">
      <image 
        class="elderly-avatar" 
        :src="currentElderly.avatar" 
        mode="aspectFill"
        :alt="currentElderly.name"
      ></image>
      <view class="elderly-info">
        <view class="elderly-name">{{ currentElderly.name }}</view>
        <view class="elderly-basic">
          <view class="basic-item">年龄：{{ currentElderly.age }}岁</view>
          <view class="basic-item">性别：{{ currentElderly.gender }}</view>
          <view class="basic-item">上次更新：{{ currentElderly.lastUpdate }}</view>
        </view>
      </view>
      <view class="health-status" :class="currentElderly.healthStatus">
        {{ currentElderly.healthStatusText }}
      </view>
    </view>

    <!-- 健康数据列表 -->
    <view class="health-data-list">
      <view 
        class="data-item" 
        v-for="(item, index) in currentHealthData" 
        :key="index"
      >
        <!-- 第一行：Flex布局，适应图标高度 -->
        <view class="row1">
          <view class="image-container">
            <view class="data-icon" :class="item.iconClass">
              <wd-icon :name="item.icon" size="42rpx"></wd-icon>
            </view>
          </view>
          
          <view class="data-columns">
            <view class="column1">
              <view class="data-info">
                <view class="data-name">{{ item.name }}</view>
                <view class="data-desc">{{ item.desc }}</view>
              </view>
            </view>
            
            <view class="column2">
              <view class="data-value">
                <view class="current-value">{{ item.currentValue }}</view>
                <view class="normal-range">{{ item.normalRange }}</view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 第二行：操作按钮组 -->
        <view class="row2">
          <view class="action-buttons">
            <wd-button 
              size="small"
              @click="navigateToHistory(currentElderly.id, item.name)"
              class="history-btn"
            >
              历史数据
            </wd-button >
          </view>
        </view>
      </view>
	  <view>
		  <wd-button block>手动录入数据</wd-button>
	  </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 跳转到历史数据页面
import { useRouter } from 'uni-mini-router'
const router=useRouter()
// 多个长者数据
const elderlyList = ref([
  {
    id: 1,
    avatar: 'https://picsum.photos/id/237/100/100',
    name: '张爷爷',
    age: 78,
    gender: '男',
    lastUpdate: '2024-09-15 08:30',
    healthStatus: 'normal',
    healthStatusText: '健康良好'
  },
  {
    id: 2,
    avatar: 'https://picsum.photos/id/238/100/100',
    name: '李奶奶',
    age: 75,
    gender: '女',
    lastUpdate: '2024-09-15 09:15',
    healthStatus: 'attention',
    healthStatusText: '需要关注'
  },
  {
    id: 3,
    avatar: 'https://picsum.photos/id/239/100/100',
    name: '王爷爷',
    age: 82,
    gender: '男',
    lastUpdate: '2024-09-14 18:45',
    healthStatus: 'normal',
    healthStatusText: '健康良好'
  },
  {
    id: 4,
    avatar: 'https://picsum.photos/id/240/100/100',
    name: '赵奶奶',
    age: 73,
    gender: '女',
    lastUpdate: '2024-09-15 10:00',
    healthStatus: 'danger',
    healthStatusText: '需要注意'
  }
])

// 当前选中的长者索引
const currentElderlyIndex = ref(0)

// 当前选中的长者信息
const currentElderly = computed(() => {
  return elderlyList.value[currentElderlyIndex.value]
})


// 不同长者的健康数据
const elderlyHealthData = ref({
  1: [
    {
      name: '血压',
      currentValue: '135/85 mmHg',
      normalRange: '90-140/60-90 mmHg',
      desc: '最近一次测量',
      icon: 'heart',
      iconClass: 'bp-icon'
    },
    {
      name: '血糖',
      currentValue: '5.6 mmol/L',
      normalRange: '3.9-6.1 mmol/L',
      desc: '空腹测量',
      icon: 'droplet',
      iconClass: 'glucose-icon'
    },
    {
      name: '心率',
      currentValue: '72 次/分',
      normalRange: '60-100 次/分',
      desc: '静息状态',
      icon: 'pulse',
      iconClass: 'heart-rate-icon'
    },
    {
      name: '体温',
      currentValue: '36.5 ℃',
      normalRange: '36.0-37.2 ℃',
      desc: '腋下测量',
      icon: 'thermometer',
      iconClass: 'temperature-icon'
    },
    {
      name: '血氧',
      currentValue: '98 %',
      normalRange: '95-100 %',
      desc: '指尖测量',
      icon: 'activity',
      iconClass: 'oxygen-icon'
    }
  ],
  2: [
    {
      name: '血压',
      currentValue: '145/92 mmHg',
      normalRange: '90-140/60-90 mmHg',
      desc: '最近一次测量',
      icon: 'heart',
      iconClass: 'bp-icon'
    },
    {
      name: '血糖',
      currentValue: '6.8 mmol/L',
      normalRange: '3.9-6.1 mmol/L',
      desc: '空腹测量',
      icon: 'droplet',
      iconClass: 'glucose-icon'
    },
    {
      name: '心率',
      currentValue: '85 次/分',
      normalRange: '60-100 次/分',
      desc: '静息状态',
      icon: 'pulse',
      iconClass: 'heart-rate-icon'
    }
  ],
  3: [
    {
      name: '血压',
      currentValue: '130/82 mmHg',
      normalRange: '90-140/60-90 mmHg',
      desc: '最近一次测量',
      icon: 'heart',
      iconClass: 'bp-icon'
    },
    {
      name: '心率',
      currentValue: '70 次/分',
      normalRange: '60-100 次/分',
      desc: '静息状态',
      icon: 'pulse',
      iconClass: 'heart-rate-icon'
    }
  ],
  4: [
    {
      name: '血压',
      currentValue: '155/98 mmHg',
      normalRange: '90-140/60-90 mmHg',
      desc: '最近一次测量',
      icon: 'heart',
      iconClass: 'bp-icon'
    },
    {
      name: '血氧',
      currentValue: '93 %',
      normalRange: '95-100 %',
      desc: '指尖测量',
      icon: 'activity',
      iconClass: 'oxygen-icon'
    }
  ]
})

// 当前长者的健康数据
const currentHealthData = computed(() => {
  const elderlyId = elderlyList.value[currentElderlyIndex.value].id
  return elderlyHealthData.value[elderlyId] || []
})

// 切换长者
const switchElderly = (index) => {
  currentElderlyIndex.value = index
}

// 返回上一页
const handleGoBack = () => {
  uni.navigateBack({ delta: 1 })
}


const navigateToHistory = (elderlyId, type) => {
  // uni.navigateTo({
  //   url: `/pages/health-history/index?elderlyId=${elderlyId}&type=${encodeURIComponent(type)}`
  // })
  router.push({name:"healthManagerHistoryData"})
  
}
</script>

<style lang="less" scoped>
.health-management-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

// 长者滚动Tab
.elderly-tabs {
  background-color: #fff;
  padding: 16rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  
  .tabs-scroll {
    width: 100%;
    white-space: nowrap;
    
    .tabs-container {
      display: inline-flex;
      gap: 24rpx;
      padding: 8rpx 0;
    }
    
    .tab-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 0 10rpx;
      opacity: 0.7;
      transition: all 0.3s;
      
      &.active {
        opacity: 1;
      }
      
      .tab-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-bottom: 8rpx;
        border: 3rpx solid transparent;
      }
      
      .tab-name {
        font-size: 24rpx;
        color: #333;
        font-weight: 500;
      }
    }
    
    .tab-item.active {
      .tab-avatar {
        border-color: #0658ec;
      }
      
      .tab-name {
        color: #0658ec;
      }
    }
  }
}

// 长者信息卡片
.elderly-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.elderly-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  border: 4rpx solid #f0f0f0;
}

.elderly-info {
  flex: 1;
}

.elderly-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
}

.elderly-basic {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.basic-item {
  font-size: 24rpx;
  color: #666;
}

.health-status {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  
  &.normal {
    background-color: #e6f7ed;
    color: #52c41a;
  }
  
  &.attention {
    background-color: #fffbe6;
    color: #faad14;
  }
  
  &.danger {
    background-color: #fff2f0;
    color: #ff4d4f;
  }
}

// 健康数据列表
.health-data-list {
  padding: 0 20rpx 40rpx;
}

// 数据项容器
.data-item {
  background-color: #fff;
  padding: 16rpx 30rpx;
  margin-bottom: 16rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

// 第一行：Flex布局，适应90rpx高度的图标
.row1 {
  display: flex;          /* 启用Flex布局 */
  align-items: center;    /* 垂直居中对齐子元素 */
  height: 90rpx;          /* 行高适应图标高度 */
  // margin-bottom: 16rpx;   /* 与第二行保持间距 */
}

// 图标容器：适配90rpx高度的图标
.image-container {
  flex: 0 0 auto;         /* 不伸缩，保持固有宽度 */
  height: 100%;           /* 占满Row1高度 */
  display: flex;          /* 内部Flex布局 */
  align-items: center;    /* 图标垂直居中 */
  justify-content: center;/* 图标水平居中 */
  margin-right: 24rpx;    /* 与数据列的间距 */
}

// 数据图标：设置为90rpx高度
.data-icon {
  width: 90rpx;           /* 宽度与高度一致 */
  height: 90rpx;          /* 核心变更：高度设置为90rpx */
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.bp-icon {
    background-color: #e6f4ff;
    color: #1890ff;
  }
  
  &.glucose-icon {
    background-color: #fff2e8;
    color: #fa8c16;
  }
  
  &.heart-rate-icon {
    background-color: #ffe6e6;
    color: #f5222d;
  }
  
  &.temperature-icon {
    background-color: #e8f7ff;
    color: #36cfc9;
  }
  
  &.oxygen-icon {
    background-color: #f6ffed;
    color: #722ed1;
  }
}

// 数据列容器：Flex子项，占剩余空间
.data-columns {
  display: flex;          /* 内部启用Flex布局 */
  flex: 1;                /* 占据剩余全部空间 */
  height: 100%;           /* 占满Row1高度 */
  align-items: center;    /* 内部元素垂直居中 */
}

// 第一列：数据名称和描述
.column1 {
  flex: 1;                /* 分配1份宽度 */
  height: 100%;           /* 占满高度 */
  display: flex;          /* 内部Flex布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center;/* 垂直居中 */
}

.data-info {
	height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
  .data-name {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 2rpx;
  }
  
  .data-desc {
    font-size: 22rpx;
    color: #999;
  }
}

// 第二列：数据值和正常范围
.column2 {
  flex: 1;                /* 分配1份宽度 */
  height: 100%;           /* 占满高度 */
  display: flex;          /* 内部Flex布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center;/* 垂直居中 */
  align-items: flex-end;  /* 水平右对齐 */
  min-width: 220rpx;      /* 增加最小宽度防止挤压 */
  
}

.data-value {
  text-align: right;
  padding-bottom: 4rpx;
  border-bottom: 1rpx solid #f0f0f0; /* 下边框 */
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
  
  .current-value {
    font-size: 26rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 2rpx;
  }
  
  .normal-range {
    font-size: 22rpx;
    color: #666;
  }
}

// 第二行：操作按钮组
.row2 {
  display: flex;
  justify-content: flex-end;
  padding-top: 12rpx;
  height: 44rpx; /* 按钮行固定高度 */
}

.action-buttons {
  display: flex;
  gap: 12rpx;
}

// 历史数据按钮样式
.history-btn {
  background-color: #0658ec !important;
  color: #fff !important;
  border-radius: 20rpx !important;
  padding: 0 20rpx !important;
}
</style>
    